<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="gobang.css"/>
    <script src="jquery-3.2.1.min.js"></script>
    <title>Title</title>
</head>
<body>
<!--<span class="top">-->

<!--</span>-->

<ul id="123">

</ul>

<span>

</span>

<script>

    var max = 16 * 16;
    var $ul = $('ul');
    var i = 0;
    for (i = 0; i < max; i++) {
        $ul.append($('<li>'))
    }

    //todo  设置落棋点
    function setPircesPoint() {
        for (var i = 0; i < 289; i++) {
            $('span').append($('<div id='+ i +'>'));
        }
    }

    setPircesPoint();


    // var maxDiv = 17 * 17;
    // for (var i = 0; i < maxDiv; i++) {
    //     $ul.append("<div id=" + i + ">" + "</div>");
    //     var position = setPircesPoint();
    //     $('#' + i)
    //         .css('marginLeft', position[i][0] + 'px')
    //         .css('marginLeft', position[i][1] + 'px');
    // }


    //todo  在落棋点上逐次渲染白黑
    function setPirces(event) {
        var tar = event.target;
        var $div = $(event.target);
        var getCss = $div.css('backgroundColor');//todo 判断落点是否已经有棋子
        if (getCss === 'rgb(255, 255, 255)' || getCss === 'rgb(0, 0, 0)') {

        } else {
            if (i % 2 === 0 && tar.tagName === 'DIV') {
                $div
                    .css('backgroundColor', 'black')
                    .css('borderColor', 'black');
                i++;

            } else if (i % 2 !== 0 && tar.tagName === 'DIV') {
                $div
                    .css('backgroundColor', 'rgb(255,255,255)')
                    .css('borderColor', 'rgb(255,255,255)');
                i++;
            }
        }
    }


    function judge1(tar) {
        var up =[];
        up[0]=tar;
        for(var i=1;i<5;i++){
            up[i]=tar+17;
        }

    }


    function judgeWinner(event) {
        var $getLast = $(event.target);
        var targetId = $getLast.attr('id'); //todo 获取最后一子的id


    }

    $span = $('span');
    $span.click(function (event) {
        setPirces(event);
        judgeWinner(event);
    })


    //todo 方案2
    // var max = 15 * 15;
    // var $ul = $('ul');
    // var k=0;
    // for (var i = 0; i < max; i++) {
    //     $ul.append($('<li>'))
    // }
    //
    //
    // function setPirces(event){
    //     var li = event.target.tagName;
    //     var $li =$(event.target);
    //     if(li ==='LI' && k%2===0){
    //         console.log("黑色"+k);
    //         $li.append('<span>');
    //         k++;
    //     }else if(li ==='LI' && k%2!==0){
    //         console.log("白色"+k);
    //         $li.append('<span class="white">');
    //         $('.white')
    //             .css('backgroundColor','rgb(255,255,255)')
    //             .css('borderColor','rgb(255,255,255)');
    //         k++;
    //     }
    // }
    //
    // $ul.click(function (event) {
    //     setPirces(event);
    // })

    //todo 方案2


    // function setPircesPoint() {
    //     var mark = 1;
    //     var x = 48;
    //     var y = 16;
    //     var position = [];
    //     position[0] = [48, 16];
    //     for (var i = 0; i < 16; i++) {
    //         position[mark++] = [x += 32, y];
    //     }
    //
    //     var a =position;
    //     a.forEach(function (current) {
    //         current[1]+=32;
    //     });
    //     console.log(position);
    //     console.log(a);
    //
    // }


</script>
</body>
</html>